import * as echarts from '../ec-canvas/echarts';
import { getSxStatAreaListAPI } from "../../../api/shesu"
import chinaMap from "../json/china.json";
let mapData = []
let xData = []
let yData = []
let splitList = [
  { start: 1000, label: "大于1000", color: "#245FDF" },
  { start: 500, end: 1000, label: "500-1000", color: "#7CA1F3" },
  { start: 100, end: 500, label: "100-500", color: "#B2D1FA" },
  { start: 0, end: 100, label: "小于100", color: "#D3E0FB" }
]
function setOptionMap(chart) {
  let option = {
    tooltip: {
      show: false,
      trigger: 'item',
      backgroundColor: "rgba(0,0,0,0.7)",
      borderWidth: 0,
      textStyle: {
        color: "#fff",
        fontWeight: "normal"
      },
      formatter: '{b}<br />{a} {c}'
    },
    visualMap: {
      type: 'piecewise',
      pieces: splitList,
      outOfRange: {
        color: '#eee'
      },
      bottom: "20",
      left: "center",
      orient: "horizontal",
      backgroundColor: "#F6F6F6"
    },
    //配置属性
    series: [
      {
        name: "涉案数量", //提示组件的标题
        type: "map",
        map: "china",
        left: 10,
        right: 10,
        top: 10,
        roam: false,
        label: {
          color: '#fff',
          show: true, //是否显示省份名称
          fontSize: 8
        },
        data: mapData, //数据
        emphasis: {
          disabled: false, // 鼠标经过不高亮， 点击高亮
          label: {
            show: true,
            color: "#fff",
          },
          itemStyle: {
            areaColor: "#7162FD"
          }
        },
        itemStyle: {
          areaColor: "#D3E0FB",
          borderColor: "#D3E2FF",
          borderWidth: 0.4
        },
        // silent: true,
        selectedMode: false
      },
    ],
  };
  chart.setOption(option);
}
function setOption(chart) {
  let option = {
    tooltip: {
      show: false,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: "rgba(0,0,0,0.7)",
      borderWidth: 0,
      textStyle: {
        color: "#fff",
        fontWeight: "normal"
      },
      // formatter: '{a}<br />{b} {c}'
    },
    legend: {
      show: false
    },
    grid: {
      left: 10,
      right: 30,
      bottom: 30,
      top: 20,
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      splitLine: {
        lineStyle: {
          type: "dashed"
        }
      }
    },
    yAxis: {
      type: 'category',
      // data: ['北京', '上海', '山东', 'India', 'China', 'World','河南'],
      data: xData,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false,
      }
    },
    series: [
      {
        name: '涉案数量',
        type: 'bar',
        barWidth: '20',
        itemStyle: {
          borderRadius: [0, 3, 3, 0],
          color: "#165DFF"
        },
        label: {
          show: true,
          position: 'right',
          color: "#F04040"
        },
        data: yData
      }
    ]
  };
  chart.setOption(option);

}

Component({
  options: {
    styleIsolation: "apply-shared"
  },
  /**
   * 组件的属性列表
   */
  properties: {
    debtorId: {
      type: String,
      value: ""
    },
    businessType: {
      type: String,
      value: "1"
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    isLoaded: false,
    isLoadedMap: false,
    ec: {
      lazyLoad: true
    },
    emptyFlag: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    initBarChart() {
      this.ecComponent.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        setOption(chart);

        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.chart = chart;

        this.setData({
          isLoaded: true
        });
        return chart;
      });
    },
    initMapChart() {
      this.ecComponentMap.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(chart);
        echarts.registerMap("china", { geoJSON: chinaMap });
        setOptionMap(chart);

        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.chartMap = chart;

        this.setData({
          isLoadedMap: true
        });
        return chart;
      });



    },
    setSplitList(maxVal) {
      let colors = ["#AEC5F8", "#7CA1F3", "#245FDF", "#173D8F"]
      if (maxVal < 500) {
        splitList = [
          { start: 200, label: "大于200", color: colors[3] },
          { start: 50, end: 200, label: "50-200", color: colors[2] },
          { start: 10, end: 50, label: "10-50", color: colors[1] },
          { start: 0, end: 10, label: "小于10", color: colors[0] }
        ]
      } else {
        splitList = [
          { start: 1000, label: "大于1000", color: colors[3] },
          { start: 500, end: 1000, label: "500-1000", color: colors[2] },
          { start: 100, end: 500, label: "100-500", color: colors[1] },
          { start: 0, end: 100, label: "小于100", color: colors[0] }
        ]
      }
    },
    getDatas() {
      getSxStatAreaListAPI({ id: this.data.debtorId, businessType: this.data.businessType }).then(res => {
        let content = res.content || [];
        if (content.length == 0) {
          this.setData({
            emptyFlag: true
          })
          return
        }
        mapData = content;
        let barData = content.slice(-10)
        xData = barData.map(item => item.name)
        yData = barData.map(item => item.value)
        // 根据 yData 最大值 设置 地图的 splitList
        let maxVal = yData[yData.length - 1]
        this.setSplitList(Number(maxVal));
        this.initBarChart()
        this.initMapChart()
      })
    }
  },
  lifetimes: {
    attached: function () {
      this.ecComponent = this.selectComponent('#mychart-dom-case-disbar')
      this.ecComponentMap = this.selectComponent('#mychart-dom-case-dismap')
    }
  },
  observers: {
    'debtorId': function () {
      if (this.data.debtorId) {
        this.getDatas()
      }
    }
  },
})